import { createElement, useEffect, useState } from 'rax';
import View from 'rax-view';
import Text from 'rax-text';
import Image from 'rax-image';
import {
  queryUserHistory,
  queryPointsRedeem,
  postUserInvitations,
  postUserSubscription
} from '@/api';
import './index.css';

const ModalTask = (props) => {
  let {
    point,
    userInfo,
    isFavor
  } = props;
  const onPostInvitations = async()=>{
    await postUserInvitations();
    props.onReload && props.onReload();
  }

  const onFavorShop = () => {
    if (isFavor) {
      return;
    }
    my.favorShop({
      id: 1652554937,
      success: function (res) {
        props.onChangeFavor && props.onChangeFavor({isFavor: true})
        updateUserSubscription();
        my.showToast({
          content: '订阅成功',
          type: 'none',
          zIndex: 9999
        });
      }
    })
  }

  const updateUserSubscription = async() => {
    await postUserSubscription({});
    props.onReload && props.onReload();
  }

  const onRedeem = () => {
    queryPointsRedeem()
      .then(res=>{
        console.log('res', res)
        if (res.Code == 454) {
          my.showToast({
            content: '积分不足',
            type: 'none',
            zIndex: 9999
          });
        } else {
          props.onReload && props.onReload();
        }
      })
  }

  return (
    <View
      className='maskView'
      onClick={()=>{
        props.onClose && props.onClose()
      }}
    >
      <View
        onClick={(e)=>{
          e.stopPropagation();
        }}
        className='modal_task'
      >
        <View className='modal_task_title'>
          <Image
            source={{
              uri: 'https://jala-test-images.sndaurl.cn/images/task_title.png'
            }}
            className='modal_task_title_img'
            mode='aspectFill'
          />
          <Image
            source={{
              uri: 'https://jala-test-images.sndaurl.cn/images/closeIcon.png'
            }}
            className='modal_task_title_icon'
            onClick={()=>{props.onClose && props.onClose()}}
            mode='aspectFill'
          />
        </View>
        <View className='modal_task_main'>
          <View className='modal_task_section'>
            <Image
              source={{
                uri: 'https://jala-test-images.sndaurl.cn/images/arrowBg.png'
              }}
              className='modal_task_section_icon'
              mode='aspectFill'
            />
            <View className='modal_task_section_name'>加入会员（1/1）</View>
            <View className='modal_task_section_desc'>变妆次数+3，活动期间限一次</View>
            <View className='modal_task_section_action finish'>已完成</View>
          </View>
          <View className='modal_task_section'>
            <Image
              source={{
                uri: 'https://jala-test-images.sndaurl.cn/images/arrowBg.png'
              }}
              className='modal_task_section_icon'
              mode='aspectFill'
            />
            <View className='modal_task_section_name'>邀请好友（{userInfo.invitations}/5）</View>
            <View className='modal_task_section_desc'>成功邀请1位用户，即可获得1次变妆机会</View>
            {
              userInfo.invitations === 5 ? (
                <View  className='modal_task_section_action pedding'>已完成</View>
              ) : (
                <button
                  open-type="share"
                  className={`modal_task_section_action`}
                  catchTouchMove
                  onClick={()=>{
                    my.showSharePanel();
                    props.onReload && props.onReload();
                  }}
                >
                  完成任务
                </button>
              )
            }
          </View>
          <View className='modal_task_section'>
            <Image
              source={{
                uri: 'https://jala-test-images.sndaurl.cn/images/arrowBg.png'
              }}
              className='modal_task_section_icon'
              mode='aspectFill'
            />
            <View className='modal_task_section_name'>订阅店铺（{userInfo.subscription == 1 ? 1 : 0}/1）</View>
            <View className='modal_task_section_desc'>首次订阅关注店铺，变妆次数+1，活动期间</View>
            <View
              className={`modal_task_section_action ${userInfo.subscription == 1 ? 'pedding' : ''}`}
              onClick={()=>{onFavorShop()}}
            >
              {isFavor ? '已完成' : '完成任务'}
            </View>
          </View>
          <View className='modal_task_section'>
            <Image
              source={{
                uri: 'https://jala-test-images.sndaurl.cn/images/arrowBg.png'
              }}
              mode='aspectFill'
              className='modal_task_section_icon'
            />
            <View className='modal_task_section_name'>积分兑换（当前积分：{point}）</View>
            <View className='modal_task_section_desc'>自然堂100会员积分可兑换1次变妆机会，</View>
            <View className='modal_task_section_action' onClick={()=>{onRedeem()}}>完成任务</View>
          </View>
          <View className='modal_task_section'>
            <Image
              source={{
                uri: 'https://jala-test-images.sndaurl.cn/images/arrowBg.png'
              }}
              className='modal_task_section_icon'
              mode='aspectFill'
            />
            <View className='modal_task_section_name'>获取更多积分</View>
            <View className='modal_task_section_desc w_full'>可微信搜索“自然堂官方商城”小程序进行购</View>
          </View>
        </View>
      </View>
    </View>
  )
}

export default ModalTask;
